import { IconCard } from '~/components/card'
import { List } from '~/components/list'
import BitbucketIcon from '~/components/icons/bitbucket'
import GitLabIcon from '~/components/icons/gitlab'
import GitHubIcon from '~/components/icons/github'

export const Author = ({ name }) => <span>{name}</span>
export const Type = ({ type }) => <span>{type}</span>

To deploy your <Author name={props.name} /> <Type type={props.type} /> with a [ZEIT Now for Git Integration](/docs/v2/git-integrations), make sure your created project has been pushed to a Git repository.

[Import the project](/new) into ZEIT Now using your Git integration of choice:

<List columnsDesktop={3} columnsTablet={3} columnsMobile={1}>
  <IconCard label="GitHub" icon={<GitHubIcon />} href="/new/git?tab=github" plus />
  <IconCard label="GitLab" icon={<GitLabIcon />} href="/new/git?tab=gitlab" plus />
  <IconCard
    label="Bitbucket"
    icon={<BitbucketIcon />}
    href="/new/git?tab=bitbucket"
    plus
  />
</List>

After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](/docs/v2/platform/deployments#preview), and all changes made to the default branch (commonly "master") will result in a [Production Deployment](/docs/v2/platform/deployments#production).
